<template>
  <view class="search-card">
    <view class="search-item" v-for="(conf, index) in searchConf" :key="index">
      <view class="s-top" :hover-class="conf.type == 'select' ? 'hover-active' : ''" @click="conf.handleFn ? conf.handleFn(conf.prop, conf.label) : ()=>{}">
        <view class="s-label">
          {{conf.label}} <text class="s-tips" v-if="conf.tipsPosition == 'right'">{{conf.tips}}</text>
        </view>
        <view style="display:flex" v-if="conf.type == 'select'">
          <text class="s-text">{{searchForm[conf.prop]}}</text>

          <image src="@/static/common/arrow-right.svg" mode="scaleToFill" style="width:40rpx;height:40rpx" />
        </view>
      </view>
      <view class="s-tips" v-if="conf.tipsPosition == 'bottom'">{{conf.tips}}</view>
      <template v-if="!conf.type">
        <view class="s-con" :class="conf.prop == 'edu' ? 's-3fr' : ''">
          <view class="s-con-item" v-for="(v, i) in conf.options" :key="i" hover-class="hover-active" :class="(searchForm[conf.prop].includes(v.label) || v.active) ? 'active-item' : ''"
            @click="conf.handleFn ? conf.handleFn(conf.prop, conf.label, i) : changeItem(v.label, conf.prop)">{{v.label}}</view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  searchConf: {
    type: Array,
    default: () => [],
  },
  searchForm: {
    type: Object,
    default: () => {},
  },
});

const changeItem = (val, prop) => {
	
  if (prop == "edu") {
    const arr = props.searchForm[prop];

    if (val == "不限") {
      arr.splice(0, arr.length, "不限");
    } else {
      if (arr.includes(val)) {
        const i = arr.findIndex((v) => v == val);
        arr.splice(i, 1);
      } else {
        arr.push(val);
      }

      if (arr.includes("不限")) {
        const i = arr.findIndex((v) => v == "不限");
        arr.splice(i, 1);
      }
      if (!arr.length) {
        arr.push("不限");
      }
    }


    props.searchForm[prop] = arr;
  } else if (["age", "height"].includes(prop)) {
    props.searchForm[prop] = val;
  } else {
    props.searchForm[prop] = [val];
  }
	
	
};
</script>

<style lang=scss scoped>
.search-item {
  padding: 40rpx 0 30rpx;
  border-bottom: 1px solid #e9e9e9;
}
.s-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s-label {
  font-weight: 500;
  font-size: 32rpx;
  color: #000;
}
.s-text {
  font-weight: bold;
  font-size: 32rpx;
  color: #000;
  margin-right: 10rpx;
}
.s-tips {
  font-weight: bold;
  font-size: 28rpx;
  color: #eda66e;
}

.s-con {
  padding-top: 20rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20rpx;
}

.s-3fr {
  grid-template-columns: 1fr 1fr 1fr;
}
.s-con-item {
  height: 80rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
  font-weight: bold;
  font-size: 32rpx;
  color: #000;
  text-align: center;
  line-height: 80rpx;
  border: 2rpx solid #f8f8f8;
}

.active-item {
  background: rgba(246, 89, 82, 0.1);
  border: 2rpx solid #f65952;
  color: #f65952;
}
</style>